<template>
  <view class="dashboard-container">
    <view class="performance-card">
      <view class="card-title">业绩统计</view>
      <view class="performance-switch">
        <button 
          :class="['switch-btn', timeType === 'day' ? 'active' : '']" 
          @click="changeTimeType('day')"
        >
          本日
        </button>
        <button 
          :class="['switch-btn', timeType === 'month' ? 'active' : '']" 
          @click="changeTimeType('month')"
        >
          本月
        </button>
      </view>
      <view class="performance-details">
        <view class="detail-item">
          <text class="label">总分拣单数</text>
          <text class="value">{{ totalOrders }}</text>
        </view>
        <!-- 可以添加更多统计指标 -->
      </view>
    </view>
  </view>
</template>

<script>
import { request } from '@/utils/request'

export default {
  data() {
    return {
      timeType: 'day', // 默认显示本日
      totalOrders: 0
    }
  },
  onShow() {
    this.fetchPerformanceData()
  },
  methods: {
    changeTimeType(type) {
      this.timeType = type
      this.fetchPerformanceData()
    },
    async fetchPerformanceData() {
      try {
        const res = await request({
          url: '/sorter/performance',
          method: 'GET',
          data: {
            timeType: this.timeType
          }
        })

        if (res.code === 200) {
          this.totalOrders = res.data
        }
      } catch (err) {
        console.error('获取业绩数据失败:', err)
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  background-color: #f4f4f4;
  min-height: 100vh;
  padding: 20px;
}

.performance-card {
  background-color: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.card-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.performance-switch {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.switch-btn {
  width: 100px;
  padding: 10px;
  margin: 0 10px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 10px;
  color: #666;
}

.switch-btn.active {
  background-color: #007aff;
  color: white;
}

.performance-details {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 15px;
}

.label {
  color: #666;
  font-size: 16px;
}

.value {
  color: #007aff;
  font-size: 18px;
  font-weight: bold;
}
</style> 